<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
</head>

<body>
    <div id="app">
        <parent-component></parent-component>
    </div>

    <script src="vue.js"></script>
    <script>
        const { ref, createApp, computed, defineComponent, h } = Vue;

        // 子组件
        const ChildComponent = defineComponent({
            name: 'ChildComponent',
            props: {
                message: String,
                modelValue: String
            },
            emits: ['update:modelValue'],
            setup(props, { emit }) {
                const inputRef = ref(null);

                function handleChange(event) {
                    emit('update:modelValue', event.target.value);
                }

                return {
                    inputRef,
                    handleChange
                };
            },
            template: `
                <div>
                    <input 
                        v-model="modelValue" 
                        @input="handleChange" 
                        ref="inputRef" 
                        placeholder="输入"
                    />
                    <p>父亲: {{ message }}</p>
                </div>
            `
        });

        // 父组件
        const ParentComponent = defineComponent({
            name: 'ParentComponent',
            components: {
                ChildComponent
            },
            setup() {
                const message = ref('你好!');
                const childInputValue = ref('');

                function handleButtonClick() {
                    alert(`儿子: ${childInputValue.value}`);
                }

                return {
                    message,
                    childInputValue,
                    handleButtonClick
                };
            },
            template: `
                <div class="container">
                    <child-component
                        :message="message"
                        v-model="childInputValue"
                    >
                        <template #default>
                            <p>This is a slot content in the child component.</p>
                        </template>
                    </child-component>
                    <button class="btn" @click="handleButtonClick">
                        儿子回答
                    </button>
                </div>
            `
        });

        const app = createApp(ParentComponent);
        app.mount("#app");
    </script>
</body>

</html>
